import React from 'react'
import {TopicWrapper, TopicItem, TopicMore} from '../style';
import {connect} from 'react-redux';

class Topic extends React.PureComponent {
    render() {
        const {topicList} = this.props;
        return (
            <TopicWrapper>
                {topicList.map((item) => {
                    return <TopicItem key={item.get('id')}>
                        <img className='topic-pic'
                             src={item.get('imgUrl')}
                             alt=""/>
                        {item.get('title')}
                    </TopicItem>
                })}
                <TopicMore className='topic-more'>更多热门专题<span className='iconfont'>&#xe61c;</span></TopicMore>
            </TopicWrapper>
        )
    }
}

const mapState = (state) => {
    return {
        topicList: state.getIn(['home', 'topicList'])
    }
};
export default connect(mapState, null)(Topic)
